<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>商品被浏览记录</span>
      </div>
    </template>
    <!-- 订单列表 -->
    <el-table :data="allBrowsingHistory" style="width: 100%">
      <el-table-column label="商品图像">
        <template #default="{ row }">
          <img :src=row.image style="width: 100px; object-fit: cover;">
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        width="400"
        prop="goodsName"
      ></el-table-column>
      <el-table-column label="浏览者" prop="customerName"></el-table-column>
      <el-table-column label="浏览时间" prop="browsingTime"> </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button :icon="Delete" circle plain type="primary" @click="deleteBrowsingHistory(row)"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </el-card>
</template>

<script setup>
import { Delete } from "@element-plus/icons-vue";
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from "element-plus";
import { deleteBrowsingHistoryService, getAllBrowsingHistoryService } from "@/api/Business";

const allBrowsingHistory = ref([]);

//分页条数据模型
const pageNum = ref(1); //当前页
const total = ref(20); //总条数
const pageSize = ref(3); //每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size;
  getAllBrowsingHistory();
};
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num;
  getAllBrowsingHistory();
};

const getAllBrowsingHistory = async() => {
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  const result = await getAllBrowsingHistoryService(params);
  total.value = result.data.total;
  allBrowsingHistory.value = result.data.items;
}

getAllBrowsingHistory();

const deleteBrowsingHistory = async(row) => {
  ElMessageBox.confirm(
    '您确认要删除吗?',
    '温馨提示',
    {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    }
  ).then(async () => {
    //确认了删除
    const data = {
      "goodsName": row.goodsName,
      "customerName": row.customerName,
      "businessName": row.businessName,
      "browsingTime": row.browsingTime
    }
    await deleteBrowsingHistoryService(data);
    ElMessage({
        type: 'success',
        message: '删除成功',
    })
    await getAllBrowsingHistory();
  }).catch(() => {
    ElMessage({
        type: 'info',
        message: '用户取消删除',
    })
  })
}

</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.next-step {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}
</style>